import React from 'react';
import { Checkbox, Button, Tools, Avatar, Modal, Icon, Picker, ActionSheet, InputItem,Toast } from 'weaver-mobile';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { Route, withRouter, Switch, Redirect } from 'react-router-dom';
import * as API from './../../apis/attention'
import { getMultiStrFromBase64, getCurrentLabel } from './../../components/follow/followUtil';
import '../../style/follow.less';
const userLanguage = window.e9_locale.userLanguage;
const alert = Modal.alert;
let thealert=alert();
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let wrapProps;
if (isIPhone) {
  wrapProps = {
    onTouchStart: e => e.preventDefault(),
  };
}
const getLabel = Tools.getLabel;
const CheckboxItem = Checkbox.CheckboxItem;
const AgreeItem = Checkbox.AgreeItem;

@inject( 'followStore','attentionStore' )
@withRouter
@observer
export default class Follow extends React.Component {
  state = {
    value: '重要',
    sValue: 0,
    Levelvisible: false,
    selected: '',
    clicked: 'none',
    tagList: ['importantLevel2', 'importantLevel1', 'importantLevel0']
  };

  componentWillMount() {
    const {followStore,location,store} = this.props
    const {setState,cordDatas} = store
    if(this.props.location.state==undefined){
      return
    }else{
      setState({cordDatas:location.state})
    }  
  }

  componentDidMount() {
    const {followStore,location,store} = this.props
    const {getAttentionTypeSet,getStore,getWorkflowAttentionTypeSet,reqid,savedData} = followStore
    const {setState,cordDatas} = store
      if(cordDatas&&cordDatas.mode=="single"){
        getWorkflowAttentionTypeSet(cordDatas.requestids)
      }else if(cordDatas&&cordDatas.mode=="Cbatch"||cordDatas&&cordDatas.mode=="batch"){ //批量关注
        getWorkflowAttentionTypeSet(cordDatas.requestids)
      }else{
        if(cordDatas&&cordDatas.requestids.split(",").length==1){
          getWorkflowAttentionTypeSet(cordDatas.requestids)
        }else{
          getAttentionTypeSet()
        } 
      }
    getStore(this.props.store)
  }

  componentWillUnmount(){
    thealert.close()
  }

  toHistory = (val) => {
    // val ? this.props.history.push(val) : this.props.history.go(-1);
    this.props.history.go(-1);
  }

  handleClick = () => {
    const {followStore} = this.props
  }
  
  cancelAll=()=>{
    const {followStore} = this.props
    followStore.viewlist.map((val)=>{ 
        val.checked = false
    })
    this.doSave();
  }

  batchcacelAll = () =>{
    const {followStore,store} = this.props
    const {batchdelAll} = followStore
    const {cordDatas} = store
    followStore.viewlist.map((val)=>{ 
        val.checked = false
    })
    batchdelAll({src:"delByRequestids",requestids:cordDatas.requestids});
    this.doSave();
  }

  DocancelAll = () =>{
    const {store} = this.props
    const {cordDatas} = store
    if(cordDatas.mode=="Cbatch"||cordDatas.mode=="batch"){
       thealert=alert('', getLabel('511454','确定要清除选中流程的所有关注类型吗？'), [
        {text: getLabel('31129', "取消"), onPress: () => {} },
        {text: getLabel('826', "确定"), onPress: () => {this.batchcacelAll()}},
      ])
    }else{
       thealert=alert('', getLabel('511455','确定要清除该流程的所有关注类型吗？'), [
        {text: getLabel('31129', "取消"), onPress: () => {} },
        {text: getLabel('826', "确定"), onPress: () => {this.cancelAll()}},
      ])
    }
  }

  checkedChange = (value)=>{
    const {followStore} = this.props
    followStore.viewlist.map((val)=>{
      if(val.id==value){
        val.checked = !val.checked
      }
    })
  }

  goToManage = () =>{
    if(this.props.type=='detailpage'){
      this.props.history.push('/req/tagManage')
    }else if(this.props.type=='workflowpage'){
      const {cordDatas}=this.props.store;
      let route = "/center/doing";
      if(cordDatas.route){
        route = cordDatas.route;
      }
      this.props.history.push(route+'/follow/tagManage')
    }else if(this.props.type=='attentionpage'){
        const {attentionStore} =this.props;
        const nowStore=attentionStore.nowListAd.route;
      this.props.history.push(nowStore+'/follow/tagManage')
    }else if(this.props.type=='supervise'){
      const {location} = this.props
      this.props.history.push(location.pathname+'/tagManage')
    }
  }

  getFontColor=(value) =>{
    let red = parseInt(value.substring(1,3),16)
    let green = parseInt(value.substring(3,5),16)
    let blue = parseInt(value.substring(5,7),16)
    let res = red*0.299 + green*0.587 + blue*0.114
    if (res>186){
        return "#000000"
    }else{
        return "#ffffff"
    }
  }

  getContent = () =>{
    const {followStore} = this.props
    let items = []
    followStore.viewlist.map((val,index)=>{
      items.push(<div className="followContent_middle_item" key={val.id} style={{width:"50%",float:"left"}}>
        <span className="checkBox" >  
          <input id={val.id} type="checkbox" name={val.id} checked={val.checked} onClick={()=>{this.checkedChange(val.id)}} />   
        </span>
        <span className="checkBox" onClick={()=>{this.checkedChange(val.id)}}><i className="tick"></i> </span>
        <label htmlFor={val.id} className="label_for_checkbox" style={{background:val.colorval,color:this.getFontColor(val.colorval),whiteSpace:"nowrap",overflow:"hidden"}}>{
          getCurrentLabel(getMultiStrFromBase64(val.showname),userLanguage)
          }</label>
      </div>)
    })
    return items
  }

  doSave =() =>{
    const {followStore,location,store,attentionStore } = this.props
    const {saveAttention} = followStore
    const { getTree } = attentionStore
    const {setState,cordDatas} = store
    let reqids = localStorage.getItem('selectedFollowKeys')
    let ids = ''
    followStore.viewlist.map((val)=>{
      if(val.checked == 'true'||val.checked==true){
        ids+=val.id+','
      }
    })
    saveAttention({
      src:cordDatas.mode=="single" ? 'add' : cordDatas.requestids.split(",").length == 1 ? 'add' : 'batchadd',
      requestids:cordDatas.requestids,
      ids,mode:cordDatas.mode,flag:cordDatas.flag
    });

    this.props.store.setState({showCheck:false})
    //选中的不同清空
    if(cordDatas.flag=='workflow'){
      this.props.store.nowStore.listViewStore.setState({ selectedRowKeys: [] })
    }else if(cordDatas.flag=='detail'){
      
    }else{
      this.props.store.nowListAd.listViewStore.setState({ selectedRowKeys: [] })
    }
    getTree();
    //返回的地址
    this.getBackAdress()
  }

  getBackAdress = () =>{
    this.props.history.go(-1)
  }

  cancelClick = ()=>{
    //返回的地址
    this.getBackAdress()
  }

  render() {
    const {followStore} = this.props
    return (
      <div className="follow">
        <div className="followContent_top followContent">
          <label>
          {getLabel('511456','选择关注类型')}
          </label>
          <label onClick={()=>{this.goToManage()}}><Icon type="setting-up" /></label>
        </div>
        <div className="followContent_middle" style={{width:"100%",float:"left"}}>
          {this.getContent()}
        
        <div className="cancel_all_tag" onClick={()=>{this.DocancelAll()}} style={{float:"left",width:"100%"}}>
        {getLabel('511458','取消关注')}
        </div>
        <div style={{height:"10%",float:"left"}}></div>
        </div>
        <div className="followContent_bottom">
          <Button  type="primary" onClick={()=>{this.doSave()}}>{getLabel('86','保存')}</Button>
        </div>
      </div>
    )
  }
}